<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>live</title>
    <!--<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,700,700i%7CMaitree:200,300,400,600,700&amp;subset=latin-ext" rel="stylesheet">-->
    <link rel="stylesheet" href="./css/webslides.css">
    <link rel="stylesheet" href="./css/svg-icons.css">
    <script src="./js/webslides.js"></script>
    <script src="./js/svg-icons.js"></script>
    <script src="./js/mock.js"></script>
    <script src="./js/jquery-2.1.3.min.js"></script>
    <style>
        .video_mask{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,.5);
            z-index: 100;
            display: none;
        }
        .my_video{
            max-width: 100%;
            max-height: 100%;
            margin: 0 auto;
            margin-bottom: 3.2rem;
            margin-top: 3.2rem;
            display: block;
        }
    </style>
</head>
<body>
    <div class="video_mask" id="videoMask">
        <section class="slide">
            <div class="wrap">
                <video src="http:\/\/1252139118.vod2.myqcloud.com\/8e24db68vodtransgzp1252139118\/1183f9a67447398155031763206\/v.f20.mp4" id="slideVideo" class="aligncenter my_video"></video>
            </div>
        </section>

    </div>
<main role="main">
    <article id="webslides"></article>
</main>
<script src="./dist/bundle.js"></script>
<script type="text/javascript">
    var info = JSON.parse('{"info":{"id":474,"title":"ppt1721","description":"<p>ppt1721<\/p>","cover":"https:\/\/live.chinatravelacademy.com\/upload\/2018\/03\/12\/3134a471d2eb029dcf997ed65ff9653d.png","type":1,"agency_id":1,"uv":1,"status":5,"state":true,"test":false,"is_pause":false,"online":3,"max_online":5,"total_upload_image":0,"total_message":3,"except_time":1520784000000,"create_time":1520846491000,"start_time":1520849242805,"end_time":0,"duration":55698796,"authorize_appointment":0,"authorize_live":0,"authorize_playback":0,"color_theme":"green"},"agency":"\u65c5\u6e38\u5fae\u8bb2\u5802","audio":[],"images":[{"is_video":false,"img":"https:\/\/live.chinatravelacademy.com\/upload\/2018\/03\/12\/50_32842de8b6be3246e61b8104fc329214.jpg","video_url":"","video_time":0},{"is_video":false,"img":"https:\/\/live.chinatravelacademy.com\/upload\/2018\/03\/12\/50_2ddc29bef2e3cc2c38f0cb2e20189d91.jpg","video_url":"","video_time":0},{"is_video":false,"img":"https:\/\/live.chinatravelacademy.com\/upload\/2018\/03\/12\/50_2a10503527a661b3bb6754c60bd7a1ce.jpg","video_url":"","video_time":0},{"is_video":true,"img":"https:\/\/1252139118.vod2.myqcloud.com\/8e24db68vodtransgzp1252139118\/1183f9a67447398155031763206\/snapshot\/1520846577_3319960058.100_0.jpg","video_url":"http:\/\/1252139118.vod2.myqcloud.com\/8e24db68vodtransgzp1252139118\/1183f9a67447398155031763206\/v.f20.mp4","video_time":74},{"is_video":false,"img":"https:\/\/live.chinatravelacademy.com\/upload\/2018\/03\/12\/50_00feee178da194564c4806f23f0d65a9.png","video_url":"","video_time":0},{"is_video":false,"img":"https:\/\/live.chinatravelacademy.com\/upload\/2018\/03\/12\/50_ac583a52214f33d50e7a55c212d61056.png","video_url":"","video_time":0},{"is_video":true,"img":"https:\/\/1252139118.vod2.myqcloud.com\/8e24db68vodtransgzp1252139118\/1183fa467447398155031763251\/snapshot\/1520846613_1879355400.100_0.jpg","video_url":"http:\/\/1252139118.vod2.myqcloud.com\/8e24db68vodtransgzp1252139118\/1183fa467447398155031763251\/v.f20.mp4","video_time":106},{"is_video":false,"img":"https:\/\/live.chinatravelacademy.com\/upload\/2018\/03\/12\/50_e9b358e323f0de28d1fc02c5495beca5.png","video_url":"","video_time":0}],"teachers":[{"id":10,"room_id":0,"name":"\u8bb2\u5e081","headimg":"https:\/\/live.chinatravelacademy.com\/upload\/2016\/11\/29\/b1ab9a777dcee7418b6b95c2b759ce73.jpg","description":"\u8bb2\u5e081\u8bb2\u5e081\u8bb2\u5e081\u8bb2\u5e081\u8bb2\u5e081\u8bb2\u5e081\u8bb2\u5e081\u8bb2\u5e081\u8bb2\u5e081\u8bb2\u5e081\u8bb2\u5e081\u8bb2\u5e081\u8bb2\u5e081\u8bb2\u5e081\u8bb2\u5e081\u8bb2\u5e081\u8bb2\u5e081\u8bb2\u5e081\u8bb2\u5e081\u8bb2\u5e081\u8bb2\u5e081"}],"dm":[{"timestamp":1520853545761,"msg_type":"room","msg_code":4,"msg":"\u53d1\u9001\u5f39\u5e55","from":2,"from_info":{"id":90154,"nickname":"\u674e\u7389\u4eae","headimgurl":"https:\/\/wx.qlogo.cn\/mmopen\/vi_32\/Q0j4TwGTfTKNVmuUo4JmXexo2W8ODZyj23FQpMu1Hm1WQ1oGD7O5w67ic5OKTc0bXicdhaUL2TtXgmznkUKyGGXQ\/0","is_teacher":true,"room_id":4740,"category":2,"enter_time":"2018-03-12 19:18:30","message_count":0},"live_time":{"seq_time":7054761,"timestamp":1520853545761},"data":{"links":[],"type":2,"text":"122"}},{"timestamp":1520853726158,"msg_type":"room","msg_code":4,"msg":"\u53d1\u9001\u5f39\u5e55","from":2,"from_info":{"id":90154,"nickname":"\u674e\u7389\u4eae","headimgurl":"https:\/\/wx.qlogo.cn\/mmopen\/vi_32\/Q0j4TwGTfTKNVmuUo4JmXexo2W8ODZyj23FQpMu1Hm1WQ1oGD7O5w67ic5OKTc0bXicdhaUL2TtXgmznkUKyGGXQ\/0","is_teacher":true,"room_id":4740,"category":2,"enter_time":"2018-03-12 19:18:30","message_count":1},"live_time":{"seq_time":7235157,"timestamp":1520853726158},"data":{"links":[],"type":2,"text":"\u6211\u5728\u771f\u8f6c\u5207\u8f6c\u5207\u4e00\u8d77"}},{"timestamp":1520853727836,"msg_type":"room","msg_code":4,"msg":"\u53d1\u9001\u5f39\u5e55","from":2,"from_info":{"id":90154,"nickname":"\u674e\u7389\u4eae","headimgurl":"https:\/\/wx.qlogo.cn\/mmopen\/vi_32\/Q0j4TwGTfTKNVmuUo4JmXexo2W8ODZyj23FQpMu1Hm1WQ1oGD7O5w67ic5OKTc0bXicdhaUL2TtXgmznkUKyGGXQ\/0","is_teacher":true,"room_id":4740,"category":2,"enter_time":"2018-03-12 19:18:30","message_count":2},"live_time":{"seq_time":7236836,"timestamp":1520853727836},"data":{"links":[],"type":2,"text":"oxyhydrogen"}}],"faq":[],"last_image":{"timestamp":1520853902084,"msg_type":"room","msg_code":5,"msg":"\u5207\u6362\u56fe\u7247","from":2,"from_info":{"id":90154,"nickname":"\u674e\u7389\u4eae","headimgurl":"https:\/\/wx.qlogo.cn\/mmopen\/vi_32\/Q0j4TwGTfTKNVmuUo4JmXexo2W8ODZyj23FQpMu1Hm1WQ1oGD7O5w67ic5OKTc0bXicdhaUL2TtXgmznkUKyGGXQ\/0","is_teacher":true,"room_id":4740,"category":2,"enter_time":"2018-03-12 19:18:30","message_count":3},"live_time":{"seq_time":7411084,"timestamp":1520853902084},"data":{"type":4,"index":6}},"videos":[{"timestamp":1520849441522,"msg_type":"room","msg_code":12,"msg":"\u5f00\u59cb\u89c6\u9891","from":2,"from_info":{"id":66129,"nickname":"\u5434\u957f\u96e8","headimgurl":"https:\/\/wx.qlogo.cn\/mmopen\/vi_32\/Q0j4TwGTfTLwcfIWw42No5gaWiasGH60uX9oibS03vZhmJPReJ4glNJmck4CdBk3LcKfW74TI204tkAbn6icia4bXw\/0","is_teacher":true,"room_id":4740,"category":2,"enter_time":"2018-03-12 18:07:11","message_count":0},"live_time":{"seq_time":2950522,"timestamp":1520849441522},"data":{"url":"http:\/\/1252139118.vod2.myqcloud.com\/8e24db68vodtransgzp1252139118\/1183fa467447398155031763251\/v.f20.mp4","time":0,"index":6,"video_time":106,"type":6,"text":null}},{"timestamp":1520849572706,"msg_type":"room","msg_code":12,"msg":"\u5f00\u59cb\u89c6\u9891","from":2,"from_info":{"id":66129,"nickname":"\u5434\u957f\u96e8","headimgurl":"https:\/\/wx.qlogo.cn\/mmopen\/vi_32\/Q0j4TwGTfTLwcfIWw42No5gaWiasGH60uX9oibS03vZhmJPReJ4glNJmck4CdBk3LcKfW74TI204tkAbn6icia4bXw\/0","is_teacher":true,"room_id":4740,"category":2,"enter_time":"2018-03-12 18:07:11","message_count":0},"live_time":{"seq_time":3081706,"timestamp":1520849572706},"data":{"url":"http:\/\/1252139118.vod2.myqcloud.com\/8e24db68vodtransgzp1252139118\/1183fa467447398155031763251\/v.f20.mp4","time":0,"index":6,"video_time":106,"type":6,"text":null}},{"timestamp":1520849712437,"msg_type":"room","msg_code":12,"msg":"\u5f00\u59cb\u89c6\u9891","from":2,"from_info":{"id":66129,"nickname":"\u5434\u957f\u96e8","headimgurl":"https:\/\/wx.qlogo.cn\/mmopen\/vi_32\/Q0j4TwGTfTLwcfIWw42No5gaWiasGH60uX9oibS03vZhmJPReJ4glNJmck4CdBk3LcKfW74TI204tkAbn6icia4bXw\/0","is_teacher":true,"room_id":4740,"category":2,"enter_time":"2018-03-12 18:07:11","message_count":0},"live_time":{"seq_time":3221437,"timestamp":1520849712437},"data":{"url":"http:\/\/1252139118.vod2.myqcloud.com\/8e24db68vodtransgzp1252139118\/1183f9a67447398155031763206\/v.f20.mp4","time":0,"index":3,"video_time":74,"type":6,"text":null}},{"timestamp":1520849808956,"msg_type":"room","msg_code":12,"msg":"\u5f00\u59cb\u89c6\u9891","from":2,"from_info":{"id":66129,"nickname":"\u5434\u957f\u96e8","headimgurl":"https:\/\/wx.qlogo.cn\/mmopen\/vi_32\/Q0j4TwGTfTLwcfIWw42No5gaWiasGH60uX9oibS03vZhmJPReJ4glNJmck4CdBk3LcKfW74TI204tkAbn6icia4bXw\/0","is_teacher":true,"room_id":4740,"category":2,"enter_time":"2018-03-12 18:07:11","message_count":0},"live_time":{"seq_time":3317956,"timestamp":1520849808956},"data":{"url":"http:\/\/1252139118.vod2.myqcloud.com\/8e24db68vodtransgzp1252139118\/1183f9a67447398155031763206\/v.f20.mp4","time":0,"index":3,"video_time":74,"type":6,"text":null}},{"timestamp":1520849965137,"msg_type":"room","msg_code":12,"msg":"\u5f00\u59cb\u89c6\u9891","from":2,"from_info":{"id":66129,"nickname":"\u5434\u957f\u96e8","headimgurl":"https:\/\/wx.qlogo.cn\/mmopen\/vi_32\/Q0j4TwGTfTLwcfIWw42No5gaWiasGH60uX9oibS03vZhmJPReJ4glNJmck4CdBk3LcKfW74TI204tkAbn6icia4bXw\/0","is_teacher":true,"room_id":4740,"category":2,"enter_time":"2018-03-12 18:07:11","message_count":0},"live_time":{"seq_time":3474137,"timestamp":1520849965137},"data":{"url":"http:\/\/1252139118.vod2.myqcloud.com\/8e24db68vodtransgzp1252139118\/1183f9a67447398155031763206\/v.f20.mp4","time":0,"index":3,"video_time":74,"type":6,"text":null}},{"timestamp":1520850527223,"msg_type":"room","msg_code":12,"msg":"\u5f00\u59cb\u89c6\u9891","from":2,"from_info":{"id":66129,"nickname":"\u5434\u957f\u96e8","headimgurl":"https:\/\/wx.qlogo.cn\/mmopen\/vi_32\/Q0j4TwGTfTLwcfIWw42No5gaWiasGH60uX9oibS03vZhmJPReJ4glNJmck4CdBk3LcKfW74TI204tkAbn6icia4bXw\/0","is_teacher":true,"room_id":4740,"category":2,"enter_time":"2018-03-12 18:28:30","message_count":0},"live_time":{"seq_time":4036223,"timestamp":1520850527223},"data":{"url":"http:\/\/1252139118.vod2.myqcloud.com\/8e24db68vodtransgzp1252139118\/1183f9a67447398155031763206\/v.f20.mp4","time":0,"index":3,"video_time":74,"type":6,"text":null}},{"timestamp":1520851071524,"msg_type":"room","msg_code":12,"msg":"\u5f00\u59cb\u89c6\u9891","from":2,"from_info":{"id":66129,"nickname":"\u5434\u957f\u96e8","headimgurl":"https:\/\/wx.qlogo.cn\/mmopen\/vi_32\/Q0j4TwGTfTLwcfIWw42No5gaWiasGH60uX9oibS03vZhmJPReJ4glNJmck4CdBk3LcKfW74TI204tkAbn6icia4bXw\/0","is_teacher":true,"room_id":4740,"category":2,"enter_time":"2018-03-12 18:37:45","message_count":0},"live_time":{"seq_time":4580523,"timestamp":1520851071524},"data":{"url":"http:\/\/1252139118.vod2.myqcloud.com\/8e24db68vodtransgzp1252139118\/1183f9a67447398155031763206\/v.f20.mp4","time":0,"index":3,"video_time":74,"type":6,"text":null}},{"timestamp":1520851152470,"msg_type":"room","msg_code":12,"msg":"\u5f00\u59cb\u89c6\u9891","from":2,"from_info":{"id":66129,"nickname":"\u5434\u957f\u96e8","headimgurl":"https:\/\/wx.qlogo.cn\/mmopen\/vi_32\/Q0j4TwGTfTLwcfIWw42No5gaWiasGH60uX9oibS03vZhmJPReJ4glNJmck4CdBk3LcKfW74TI204tkAbn6icia4bXw\/0","is_teacher":true,"room_id":4740,"category":2,"enter_time":"2018-03-12 18:37:45","message_count":0},"live_time":{"seq_time":4661470,"timestamp":1520851152470},"data":{"url":"http:\/\/1252139118.vod2.myqcloud.com\/8e24db68vodtransgzp1252139118\/1183f9a67447398155031763206\/v.f20.mp4","time":0,"index":3,"video_time":74,"type":6,"text":null}},{"timestamp":1520851235957,"msg_type":"room","msg_code":12,"msg":"\u5f00\u59cb\u89c6\u9891","from":2,"from_info":{"id":66129,"nickname":"\u5434\u957f\u96e8","headimgurl":"https:\/\/wx.qlogo.cn\/mmopen\/vi_32\/Q0j4TwGTfTLwcfIWw42No5gaWiasGH60uX9oibS03vZhmJPReJ4glNJmck4CdBk3LcKfW74TI204tkAbn6icia4bXw\/0","is_teacher":true,"room_id":4740,"category":2,"enter_time":"2018-03-12 18:37:45","message_count":0},"live_time":{"seq_time":4744957,"timestamp":1520851235957},"data":{"url":"http:\/\/1252139118.vod2.myqcloud.com\/8e24db68vodtransgzp1252139118\/1183f9a67447398155031763206\/v.f20.mp4","time":0,"index":3,"video_time":74,"type":6,"text":null}},{"timestamp":1520851316811,"msg_type":"room","msg_code":12,"msg":"\u5f00\u59cb\u89c6\u9891","from":2,"from_info":{"id":66129,"nickname":"\u5434\u957f\u96e8","headimgurl":"https:\/\/wx.qlogo.cn\/mmopen\/vi_32\/Q0j4TwGTfTLwcfIWw42No5gaWiasGH60uX9oibS03vZhmJPReJ4glNJmck4CdBk3LcKfW74TI204tkAbn6icia4bXw\/0","is_teacher":true,"room_id":4740,"category":2,"enter_time":"2018-03-12 18:37:45","message_count":0},"live_time":{"seq_time":4825811,"timestamp":1520851316811},"data":{"url":"http:\/\/1252139118.vod2.myqcloud.com\/8e24db68vodtransgzp1252139118\/1183f9a67447398155031763206\/v.f20.mp4","time":0,"index":3,"video_time":74,"type":6,"text":null}},{"timestamp":1520851400683,"msg_type":"room","msg_code":12,"msg":"\u5f00\u59cb\u89c6\u9891","from":2,"from_info":{"id":66129,"nickname":"\u5434\u957f\u96e8","headimgurl":"https:\/\/wx.qlogo.cn\/mmopen\/vi_32\/Q0j4TwGTfTLwcfIWw42No5gaWiasGH60uX9oibS03vZhmJPReJ4glNJmck4CdBk3LcKfW74TI204tkAbn6icia4bXw\/0","is_teacher":true,"room_id":4740,"category":2,"enter_time":"2018-03-12 18:37:45","message_count":0},"live_time":{"seq_time":4909683,"timestamp":1520851400683},"data":{"url":"http:\/\/1252139118.vod2.myqcloud.com\/8e24db68vodtransgzp1252139118\/1183f9a67447398155031763206\/v.f20.mp4","time":0,"index":3,"video_time":74,"type":6,"text":null}},{"timestamp":1520851576656,"msg_type":"room","msg_code":12,"msg":"\u5f00\u59cb\u89c6\u9891","from":2,"from_info":{"id":66129,"nickname":"\u5434\u957f\u96e8","headimgurl":"https:\/\/wx.qlogo.cn\/mmopen\/vi_32\/Q0j4TwGTfTLwcfIWw42No5gaWiasGH60uX9oibS03vZhmJPReJ4glNJmck4CdBk3LcKfW74TI204tkAbn6icia4bXw\/0","is_teacher":true,"room_id":4740,"category":2,"enter_time":"2018-03-12 18:46:12","message_count":0},"live_time":{"seq_time":5085656,"timestamp":1520851576656},"data":{"url":"http:\/\/1252139118.vod2.myqcloud.com\/8e24db68vodtransgzp1252139118\/1183f9a67447398155031763206\/v.f20.mp4","time":0,"index":3,"video_time":74,"type":6,"text":null}},{"timestamp":1520853688118,"msg_type":"room","msg_code":12,"msg":"\u5f00\u59cb\u89c6\u9891","from":2,"from_info":{"id":90154,"nickname":"\u674e\u7389\u4eae","headimgurl":"https:\/\/wx.qlogo.cn\/mmopen\/vi_32\/Q0j4TwGTfTKNVmuUo4JmXexo2W8ODZyj23FQpMu1Hm1WQ1oGD7O5w67ic5OKTc0bXicdhaUL2TtXgmznkUKyGGXQ\/0","is_teacher":true,"room_id":4740,"category":2,"enter_time":"2018-03-12 19:18:30","message_count":1},"live_time":{"seq_time":7197118,"timestamp":1520853688118},"data":{"url":"http:\/\/1252139118.vod2.myqcloud.com\/8e24db68vodtransgzp1252139118\/1183f9a67447398155031763206\/v.f20.mp4","time":0,"index":3,"video_time":74,"type":6,"text":null}},{"timestamp":1520853903178,"msg_type":"room","msg_code":12,"msg":"\u5f00\u59cb\u89c6\u9891","from":2,"from_info":{"id":90154,"nickname":"\u674e\u7389\u4eae","headimgurl":"https:\/\/wx.qlogo.cn\/mmopen\/vi_32\/Q0j4TwGTfTKNVmuUo4JmXexo2W8ODZyj23FQpMu1Hm1WQ1oGD7O5w67ic5OKTc0bXicdhaUL2TtXgmznkUKyGGXQ\/0","is_teacher":true,"room_id":4740,"category":2,"enter_time":"2018-03-12 19:18:30","message_count":3},"live_time":{"seq_time":7412178,"timestamp":1520853903178},"data":{"url":"http:\/\/1252139118.vod2.myqcloud.com\/8e24db68vodtransgzp1252139118\/1183fa467447398155031763251\/v.f20.mp4","time":0,"index":6,"video_time":106,"type":6,"text":null}}],"timestamp":1520906100781}');
    console.log(info)
    function sectionTpl(id, url) {
        var tpl =   '<section id="section-' + id + '" class="slide">' +
                '<div class="wrap">' +
                '<img class="aligncenter" src="' + url + '">' +
                '</div>' +
                '</section>'
        return tpl
    } 
    function initPage() {
        var str = ''
        for (var i in info.images) {
            str += sectionTpl(i, info.images[i].img)
        }
        $('#webslides').append(str)
    }
    initPage()
    window.ws = new WebSlides()
    var messageListener = {
        listenLiveSlide: function(msg, callback) {
            console.log('listenLiveSlide', msg)
            var index = msg.data.index
            ws.goToSlide(index)
        },
        listenLiveStartVideo: function(msg, callback) {
            console.log('listenLiveStartVideo', msg)
            var url = msg.data.url
            var seekTime = msg.data.time || 0
            var videoMask = document.getElementById('videoMask')
            videoPlayer.play(url, seekTime, function() {
                videoMask.style.display = 'block'
                console.log('play video success')
            }, function() {
                videoMask.style.display = 'none'
                console.log('play video success')
                callback && callback()
            })
        },
        listenLiveVoice: function(msg, callback) {
            console.log('listenLiveVoice', msg)
            var url = msg.data.file
            voicePlayer.play(url, function() {
                console.log('play voice success')
            }, function() {
                console.log('play voice ended')
                callback && callback()
            })
        },
        listenSocketStatus: function(res) {
            console.log('listenSocketStatus', res)
        }
    }
    manager.initPage(info, function(currentIndex) {
        ws.goToSlide(currentIndex)
    })
    manager.login(messageListener, function(res) {
        if (res) {
            console.log('登录成功')
        } else {
            console.log('登录失败')
        }
    })
    
</script>
</body>
</html>